<template>
  <u-header>
    <template #nav>
      <global-nav curr="joinus" />
    </template>
  </u-header>
  <!-- 搜索区 -->
  <div class="relative text-base search-div whitespace-nowrap">
    <div class="flex items-center search">
      <div class="grow search-input ">
        <input
          v-model="searchText"
          placeholder="请输入关键字搜索"
          type="text"
          @keyup.enter="onSearch"
        />
      </div>
      <div class="px-10 cursor-pointer search-button" @click="onSearch">
        搜索
      </div>
    </div>
  </div>
  <div class="my-10 main">
    <div class="wrapper">
      <div class="title">
        <h3 class="text-3xl font-bold">心动的offer</h3>
        <p class="mt-3 ml-20 text-base leading-5">Recruiting</p>
      </div>
      <!-- 职位列表 -->
      <div class="mt-10 job-list">
        <job-item
          v-for="job in filteredLists"
          :key="job.id"
          :job="job"
          @detail="showDetail"
        />
      </div>
      <!-- 分页 -->
      <div class="flex justify-center mt-10 text-sm pagnation">
        <div class="pagnation-item">&lt;</div>
        <div class="pagnation-item">1</div>
        <div class="pagnation-item">&gt;</div>
      </div>
      <!-- 弹窗 -->
      <job-modal
        :visible="jobModalVisible"
        :jobInfo="selectedJob"
        @close="closeModal"
      ></job-modal>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import UHeader from './UHeader.vue'
import JobItem from './JobItem.vue'
import JobModal from './JobModal.vue'
import GlobalNav from '@/components/GlobalNav.vue'

const originalList = ref([
  {
    id: 1,
    title: '游戏平面设计师',
    duty: [
      {
        id: 1,
        text: '1、负责游戏发行的素材创作，包含：投放图、视频分镜、官网、专题页、五图、icon、logo。'
      },
      { id: 2, text: '2、搜集、积累推广投放相关制作相关素材。' },
      { id: 3, text: '3、配合其他部门设计相关活动宣传物料等。' }
    ],
    required:[
      {id: 1,text: '1、2年以上平面设计制作经验，具备优秀的视觉表现能力，能驾驭不同风格的视觉设计；'},
      {id: 2,text: '2、有手绘基础优先；'},
      {id: 3,text: '3、新颖的设计理念，突出的形象及色彩表现力；'},
      {id: 4,text: '4、工作细致认真，责任心强，良好的沟通协调和理解能力和团队合作精神；'},
      {id: 5,text: '5、简历请附带作品或作品链接。'},
    ]
  },
  {
    id: 2,
    title: '游戏视频设计师',
    duty: [
      {
        id: 21,
        text: '1、负责公司游戏项目的广告视频制作，能独立完成15~60秒的广告视频设计；'
      },
      {
        id: 22,
        text: '2、根据游戏产品特点，结合各个渠道的游戏广告素材，探索视频创作方向，有一定的自主创意产出；'
      },
      {
        id: 23,
        text: '3、定期研究分析市场趋势，探索多种素材方向，根据数据反馈进行迭代；'
      }
    ],
    required:[
      {id:1,text:'1、热爱游戏，对广告投放视频有一定的了解。有1年以上广告视频制作经验及设计类相关专业优先考虑；'},
      {id:2,text:'2、熟练运用AE、Premiere等视频制作软件，掌握一定的平面设计能力及相关软件运用'},
      {id:3,text:'3、具有优秀的洞察和理解力，沟通和表达能力强，乐于学习，有较好的抗压能力，对工作认真负责；'},
      {id:4,text:'4、脑洞大开，喜欢创新，对网络热点有强烈嗅觉，并在素材中自然融合；'},
      {id:5,text:'5、简历请附带作品或作品链接。'},
    ]
  },
  {
    id: 3,
    title: '游戏商务专员',
    duty: [
      {
        id: 31,
        text: '1、负责优质游戏的引入工作， 包括商务谈判、合作接入、协议签署、渠道上架、对接跟进、后期维护、对账打款；'
      },
      {
        id: 32,
        text: '2、对引入的游戏产品质量进行评估，并负责输出包括游戏产品分析、团队背景，资质等风险评估报告；'
      },
      {
        id: 33,
        text: '3、推动产品评测，全面了解研发情况，完成商务洽谈，并跟进研发进度，确保游戏正常上线；'
      },
      {
        id: 34,
        text: '4、持续关注研发、发行、运营等模块，监测竞争对手动态，输出分析报告，为业务策略制定及投资方向提供决策支持；'
      }
    ],
    required:[
      {id:1,text:'1、主动性强，配合度高，愿意接受压力和挑战，具备良好的协作精神与团队意识；'},
      {id:2,text:'2、 熟悉和了解游戏产品和市场，有丰富的手游CP资源，擅长与开发团队沟通；'},
      {id:3,text:'3、对产品和市场均有良好的判断能力和理解能力；'},
      {id:4,text:'4、具有良好的沟通协调、谈判能力，有强烈的目标意识；'},
      {id:5,text:'5、性格活泼开朗，形象气质佳；'},
    ]
  },
  {
    id: 4,
    title: '游戏3D动作',
    duty: [
      { id: 41, text: '1、根据需求设计与制作角色动画;' },
      { id: 42, text: '2、制作场景内的物体和环境动画;' },
      { id: 43, text: '3、能熟悉运用软件进行骨骼架设和绑定;' },
      { id: 44, text: '4、使用unity3d引擎渲染;' }
    ],
    required:[
      {id:1,text:'1、动画基础扎实，有较强的动作设计能力，想象力丰富有创意;'},
      {id:2,text:'2、有2年以上游戏研发或者投放视频3D动作岗位经验，擅长Q版卡通风格的动作表现;'},
      {id:3,text:'3、热爱玩游戏，涉猎广泛，关注游戏体验。'},
      {id:4,text:'4、善于沟通，有团队精神，有责任感。对于新鲜事物接受度和敏感度高，善于自主学习;'},
      {id:5,text:'5、熟悉unity引擎有研究者优先；'},
      {id:6,text:'6、简历请附带作品或作品链接；'},
      {id:7,text:'7、欢迎应届生'},
    ]
  }
])
const searchText = ref('')
const jobList = ref([])
jobList.value = originalList.value

const filteredLists = computed(() => jobList.value)

const onSearch = () => {
  if (searchText.value.trim() === '') {
    jobList.value = originalList.value // 如果搜索为空，则恢复原始列表
  } else {
    jobList.value = originalList.value.filter((job) =>
      job.title.toLowerCase().includes(searchText.value.toLowerCase())
    )
  }
}

const jobModalVisible = ref(false)
const selectedJob = ref({})
function showDetail(payload) {
  console.log('payload:', payload)
  jobModalVisible.value = true
  selectedJob.value = payload
}
function closeModal() {
  jobModalVisible.value = false
  selectedJob.value = {}
}
</script>

<style lang="scss" scoped>
.search-div {
  z-index: 9;
  width: 825px;
  height: 60px;
  line-height: 60px;
  margin: -30px auto 20px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background: #fff;
  .search-input {
    line-height: 60px;
    background: no-repeat 20px center url(../assets/icon_search.png);
    input {
      display: block;
      width: 100%;
      border: none;
      outline: none;
      padding: 0 20px 0 50px;
      background-color: transparent;
    }
  }
  .search-button {
    background-color: #3ea0e4;
    color: #fff;
  }
}
.title {
  color: #1e445d;
  background: no-repeat 4px center url(../assets/icon_title.png);
  padding-left: 60px;
}
.job-list {
  min-height: 400px;
  border: 1px solid #d1e0eb;
  border-left: 0;
  border-right: 0;
}
.pagnation {
  .pagnation-item {
    padding: 6px 15px;
    color: #0066ff;
    cursor: pointer;
    &:first-child,
    &:last-child {
      color: #ccc;
    }
  }
}
</style>
